<template>
	<div>
	<div style="width: 100%;height: 20px;background-color: #ebedf0;"></div>
	<div style="padding: 20px;">
		
		<transition name="custom-classes-transition" enter-active-class="animated fadeInDown" leave-active-class="animated fadeOutUp" >
			<addstudent 
				:importgradeid="selectgrade" 
				:importclassid="classselect" 
				:importgradelist="gradelist"
				:importclasslist="classlist"
				:importstudentid="studentid"
				v-on:chance="chance" v-if="show" style="margin-bottom: 20px;"><span>{{addoredit}}</span></addstudent>
		</transition>
		
		
		<!--转班的面板-->
		<Modal
	        v-model="changeclassshow"
	        title="学生转班"
	        @on-ok="changeclassshowok">
	        <Row>
	        	<Col span="24" style="text-align: left;">
	        		<span style="font-size: 14px;font-weight: bold;">学生姓名：{{studentname}}</span>
		     	</Col>
	    	</Row>
	    	<Row style="margin-top:10px;">
	        	<Col span="24" style="text-align: left;">
	        		<span style="font-size: 14px;font-weight: bold;">请输入转班信息:</span>
		     	</Col>
	    	</Row>
	        <Row style="margin-top:10px;">
	        	<Col span="8" >
	        		<span style="font-size: 14px;font-weight: bold;">年级:</span>
			       	<Select v-model="selectgrade" style="width:110px">
				        <Option v-for="item in gradelist" :value="item.value" :key="item.value">{{ item.label }}</Option>
				    </Select>
		     	</Col>
		     	<Col span="8" >
		     		<span style="font-size: 14px;font-weight: bold;">班级:</span>
			       	<Select v-model="classselect" style="width:110px">
				        <Option v-for="item in classlist" :value="item.value" :key="item.value">{{ item.label }}</Option>
				    </Select>
		     	</Col>
		     	<Col span="8" >
		     		<span style="font-size: 14px;font-weight: bold;">学号:</span>
			       	<Input  v-model="classesno" placeholder="例如:0101" style="width: 110px" />
		     	</Col>
		     	
	    	</Row>
	    	<div slot="footer">
			     <Button type="text" size="large" @click="changeclassshowcancel">取消</Button>
			     <Button type="primary" size="large" @click="changeclassshowok">确定</Button>
			</div>
	    </Modal>
	    
	    
	    <Row>
	        <Col span="24" style="text-align: left;margin-top:15px;">
	        	<span>年级筛选：</span>
	        	<RadioGroup v-model="selectgrade" type="button" >
	        		<Radio v-for="item in gradelist" :key="item.value" :label="item.value">{{item.label}}</Radio>
			        
			    </RadioGroup>
			    <Spin size="large" fix v-if="gradelistshow"></Spin>
	        </Col>
	    </Row>
	    <!--<Row v-if="selectgrade">-->
	    <Row >
	        <Col span="24" style="text-align: left;margin-top:15px;">
	        	<span>班级筛选：</span>
	        	<RadioGroup  v-model="classselect" type="button" >
	        		<Radio v-for="item in classlist" :key="item.value" :label="item.value">{{item.label}}班</Radio>
			       
			    </RadioGroup>
			    <Spin size="large" fix v-if="classlistshow"></Spin>
	        </Col>
	    </Row>
	    <Row>
	        <Col span="10" style="text-align: left;margin-top:15px;font-size: 18px;">
	        	{{tablename}}
	        </Col> 
	        <Col span="14" style="text-align: right;margin-top:15px;font-size: 16px;">
	        	<Input v-model="searchInfo" icon="ios-search" @on-click="searchStudent" @on-enter="searchStudent" placeholder="姓名/账号" style="width: 200px;cursor: pointer;"></Input>
	        	<Tooltip content="导出账号信息" theme="light" placement="top">
		        	<Button style="background-color: #4496fc;" size="small" :loading="loading" @click="exportexl">
		        		<span v-if="!loading"><img style="width: 20px;margin-top: 2px;" src="../../../../static/img/export.png" alt="" /></span>
				        <span v-else>加载中</span>
		        	</Button>
	        	</Tooltip>
	        	<Tooltip content="添加学生" theme="light" placement="top">
	        		<Button  @click="addstudent" type="success" size="small"><i class="iconfont alicon-add1"></i></Button>
	        	</Tooltip>
	        	<Tooltip content="学生转班" theme="light" placement="top">
	        		<Button  @click="changeclass" type="primary" size="small"><i class="iconfont alicon-plus-transfer"></i></Button>
	        	</Tooltip>
	        	<Tooltip content="编辑学生" theme="light" placement="top">
	        		<Button @click="editstudent" type="warning" size="small"><i class="iconfont alicon-write"></i></Button>
	        	</Tooltip>
	        	<Tooltip content="删除学生" theme="light" placement="top-end">
	        		<Button @click="delstudent" type="error" size="small"><i class="iconfont alicon-delete"></i></Button>
	        	</Tooltip>
	        </Col> 
	    </Row>
	    <div style="position: relative;">
	    	<Table style="margin-top: 10px;" border ref="selection" :columns="columns4" :data="data1" @on-selection-change="studentselect"></Table>
	    	<Page style="text-align: center;margin-top:15px;" :current="current" :total="recordCount" @on-change="pageChange"/>
	    	<Spin size="large" fix v-if="studentlistshow"></Spin>
	    </div>

        
	</div>
	</div>
</template>

<script>
	import addstudent from '@/components/performance/basicsetting/Addstudent'
	import api from "@/components/js/Apidomain.js"
	
	export default{
		data(){
			return{
				addoredit:"",				//添加面板显示添加还是编辑
				studentid:"",				//编辑的时候的学生id
				
				show:false,					//控制添加学生的面板显示跟隐藏
				gradelistshow:false,		//控制年级选择条的加载中显示隐藏
				classlistshow:false,		//控制班级选择条的加载中显示隐藏
				studentlistshow:false,		//控制学生表格的加载中显示隐藏
				
				classselect:"",				//选择班级的select
				selectgrade:"",				//选择年级的select
				tablename:"学生列表:",				//学生的班级表明信息
				selections:[],							//勾选学生表的集合
				
				//转班绑定数据
				changeclassshow:false,			//转班的面板显示控制
				loading: false,				//下载模板按钮上的加载中显示隐藏
				classesno:"",					//班级学号
				studentname:"",					//转班学生的姓名
				
				searchInfo:"",
				//分页
		        recordCount:0,				//总条数
				current:1,					//页码
				
                gradelist: [],
                classlist: [],
                
                columns4: [
                    {type: 'selection',width: 60,align: 'center'},
                    {title: '学号',key: 'studentNo',align: 'center',},
                    {title: '班级座号',key: 'seatNo',align: 'center',},
                    {title: '系统账号',key: 'account',align: 'center',},
                    {title: '姓名',key: 'name',align: 'center',},
                    {title: '年级',key: 'grade',align: 'center',},
                    {title: '班级',key: 'classes',align: 'center',},
                    {title: '性别',key: 'sex',align: 'center',},
                    
                    
                ],
                data1: [
//                  {id:"4444",studentNo:"122672013040",grade: '高一',classes: '01',sex: '男',name: '张三'},
//                  {id:"4234",studentNo:"122672013040",grade: '高二',classes: '01',sex: '男',name: '李四'},
//                  {id:"42244",studentNo:"122672013040",grade: '高三',classes: '01',sex: '男',name: '王五'},
//                  {id:"4444444",studentNo:"122672013040",grade: '初一',classes: '01',sex: '男',name: '赵柳'}
                ]
			}
		},
		components:{
			addstudent,
		},
		created(){
			this.getgradelist()
		},
		methods:{
//			changeselect:function(){
////				this.classselect = "";
//				this.getclasslist();
//			},
			//改变班级选项后去请求学生列表数据
//			changeclassselect:function(){
////				//console.log(this.classselect)				
////				//console.log(this.selectgrade)	
//				this.getstudentlist();
//			},
           	studentselect:function(selection){
           		this.selections = selection
           	},
           	changeclass:function(){
           		if(this.selections.length != 1){
					this.$Message.error({
								content: '请勾选一条信息',
								duration: 10,
								closable: true
							});
					return;
				}
				this.studentname = this.selections[0].name;
           		this.changeclassshow = true;
           		
           	},
           	changeclassshowcancel:function(){
           		this.changeclassshow = false;
           	},
           	changeclassshowok:function(){
           		var reg=/^\d{4}$/;
           		if(!reg.test(this.classesno)){
           			this.$Message.error({
								content: '请输入班号座号，如0101',
								duration: 10,
								closable: true
							});
           			this.classesno = ""
           			return;
           		}
           		
				var self = this;
				var senddata = {
					"id":this.selections[0].id, 
					"gradeId":this.selectgrade, 
					"classesId":this.classselect,
					"classesNo":this.classesno,
				}
            	let url = api.apidomain+'/tqes/web/tchStudent/transferStudent';
            	this.$http.post(url,senddata).then(function(response) {
					if(response.data.success == true){
						self.$Message.success({
		                    content: response.data.msg,
		                    duration: 10,
		                    closable: true
               			})
						self.current = 1;
						self.getstudentlist();
						self.changeclassshow = false;
		            }else if(response.data.success == false){
		            		self.$Message.error({
								content: response.data.msg,
								duration: 10,
								closable: true
							});	
		            		
		            	}
					})
					.catch(function(error) {
						self.$Message.error({
							content: '系统发生错误：错误码00029',
							duration: 10,
							closable: true
						});
						
					}); 
				
				
           	},
           	delstudent:function(){
           		let delallid = [];
           		for(let key in this.selections){
           			delallid.push(this.selections[key].id)
           		}
           		if(delallid.length == 0){
           			this.$Message.error({
								content: '请勾选再删除',
								duration: 10,
								closable: true
							});	
           			return;
           		}
           		
           		this.$Modal.confirm({
                    title: '确定删除',
                    content: '<p>确定删除这些学生信息吗</p>',
                    onOk: () => {
		               this.studentlistshow = true;
		           		var self = this;
		            	let url = api.apidomain+'/tqes/web/tchStudent/batchDeleteStudent';
		            	this.$http.post(url, {'ids':delallid}).then(function(response) {
							if(response.data.success == true){
								self.$Message.success({
				                    content: '删除成功',
				                    duration: 10,
				                    closable: true
		               			})
		//						////console.log(response.data.data)
								self.studentlistshow = false;
								self.current = 1;
								self.getstudentlist();
								self.selections = [];
				            }else if(response.data.success == false){
				            		self.$Message.error({
										content: response.data.msg,
										duration: 10,
										closable: true
									});
				            		self.studentlistshow = false;
				            	}
							})
							.catch(function(error) {
								self.$Message.error({
									content: '系统发生错误：错误码00030',
									duration: 10,
									closable: true
								});
								self.studentlistshow = false;
							}); 
		                
                    },
                    onCancel: () => {
//                      this.$Message.info('Clicked cancel');
                    }
                });	
           	},
           	editstudent:function(){
           		this.addoredit = "编辑学生"
//         		//console.log(this.selections[0].id)
				if(this.selections.length != 1){
					this.$Message.error({
								content: '请勾选一条信息',
								duration: 10,
								closable: true
							});	
					return;
				}
				this.studentid = this.selections[0].id;
				this.show = true;
				
           	},
           	addstudent:function(){
           		this.addoredit = "添加学生";
           		//防止点击新增的时候传入id
           		this.studentid = ""
           		this.show = true;
           	},
           	chance:function(){
           		this.show = false;
           		this.current = 1;
           		this.getstudentlist();
           	},
           	//获取年级选择列表
           	getgradelist:function(){
           		this.gradelistshow = true;
           		var self = this;
            	let url = api.apidomain+'/tqes/web/tchStudent/getTchGradeSelect';
            	this.$http.post(url, {}).then(function(response) {
					if(response.data.success == true){
						
//						////console.log(response.data.data)
						self.gradelist = response.data.data
						
						//第一次页面进来加载第一项
						if(self.gradelist.length != 0){
							self.selectgrade = self.gradelist[0].value;
							self.getclasslist();
						}
						
						
						self.gradelistshow = false;
		            }else if(response.data.success == false){
		            		self.$Message.error({
								content: response.data.msg,
								duration: 10,
								closable: true
							});
		            		self.gradelistshow = false;
		            	}
					})
					.catch(function(error) {
						self.$Message.error({
							content: '系统发生错误：错误码00031',
							duration: 10,
							closable: true
						});
						self.gradelistshow = false;
					});
           	},
           	//获取班级级选择列表
           	getclasslist:function(){
           		this.classlistshow = true;
           		var self = this;
            	let url = api.apidomain+'/tqes/web/tchStudent/getTchClassesSelect';
            	this.$http.post(url, {gradeId:this.selectgrade}).then(function(response) {
					if(response.data.success == true){
						
//						////console.log(response.data.data)
						self.classlist = response.data.data
						
						//第一次页面进来加载第一项
						if(self.classlist.length != 0){
							self.classselect = self.classlist[0].value;
							self.current = 1;
							self.getstudentlist();;
						}
						
						self.classlistshow = false;
		            }else if(response.data.success == false){
		            		self.$Message.error({
								content: response.data.msg,
								duration: 10,
								closable: true
							});
		            		self.classlistshow = false;
		            	}
					})
					.catch(function(error) {
						self.$Message.error({
							content: '系统发生错误：错误码00032',
							duration: 10,
							closable: true
						});
						self.classlistshow = false;
					});
           	},
           	pageChange:function(value){
        		this.current = value;
        		this.getstudentlist()
        	},
           	getstudentlist:function(){
           		this.studentlistshow = true;
           		var self = this;
           		var senddata = { 
           			"current":this.current,
					"pageSize":"10",
				  	"gradeId":this.selectgrade,
					"classesId":this.classselect,
//					"enrolYear":"2016",
					"nameOrAccount":""
				}
           		if(this.searchInfo != ""){
        			senddata.nameOrAccount = this.searchInfo;
        		}
            	let url = api.apidomain+'/tqes/web/tchStudent/getStudentList';
            	this.$http.post(url,senddata).then(function(response) {
					if(response.data.success == true){
						
//						////console.log(response.data.data)
						self.data1 = response.data.data.items
						self.recordCount = response.data.data.recordCount
						self.studentlistshow = false;
		            }else if(response.data.success == false){
		            		self.$Message.error({
								content: response.data.msg,
								duration: 10,
								closable: true
							});
		            		self.studentlistshow = false;
		            	}
					})
					.catch(function(error) {
						self.$Message.error({
							content: '系统发生错误：错误码00033',
							duration: 10,
							closable: true
						});
						self.studentlistshow = false;
					});
           	},
           	searchStudent:function(){
				var senddata = { 
           			"current":this.current,
					"pageSize":"10",
				  	"gradeId":this.selectgrade,
					"classesId":this.classselect,
//					"enrolYear":"2016",
					"nameOrAccount":this.searchInfo
				}
           		var self = this;
            	let url = api.apidomain+'/tqes/web/tchStudent/getStudentList';
            	this.$http.post(url,senddata).then(function(response) {
					if(response.data.success == true){
						
//						console.log(response.data.data)
						self.data1 = response.data.data.items
						self.recordCount = response.data.data.recordCount
						self.studentlistshow = false;
		            }else if(response.data.success == false){
		            		self.$Message.error({
								content: response.data.msg,
								duration: 10,
								closable: true
							});	
//		            		self.tableshow = false;
		            	}
					})
					.catch(function(error) {
						self.$Message.error({
							content: '系统发生错误：错误码00034',
							duration: 10,
							closable: true
						});
//						self.tableshow = false;
					});
			},
			exportexl:function(){
			
				var senddata = {
					"classesId":this.classselect,
					"gradeId":this.selectgrade
				}
				
				var self = this;
            	let url = api.apidomain+'/tqes/web/tchStudent/exportExcelDto';
            	this.$http.post(url,senddata).then(function(response) {
					if(response.data.success == true){
//						////console.log(response.data.data)
						window.location.href = response.data.data;
						self.loading = false;
	            }else if(response.data.success == false){
	            		self.loading = false;
	            		self.$Message.error({
								content: response.data.msg,
								duration: 10,
								closable: true
							});	
	            	}
	            	
				})
				.catch(function(error) {
					self.loading = false;
					self.$Message.error({
							content: '系统发生错误：错误码00035',
							duration: 10,
							closable: true
						});
				});
				
			}  
		
		},
		watch:{
			searchInfo:function(){
				this.current = 1;
				this.searchStudent();
			},
			selectgrade:function(){
				this.current = 1;
				this.data1 = [];
				this.getclasslist();
				
			},
			classselect:function(){
				this.current = 1;
				this.data1 = [];
				this.getstudentlist();
			}
		}
	}
</script>

<style>
</style>